<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue2.js"></script>
</head>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        table{
            margin-right:auto;
            margin-left:auto;
        }
    </style>
<body >
    <table border='1' width="500px" id="app" >
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>地址</th>
                <th>性别</th>
            </tr>
        </thead>
        <tbody style= 'text-align:center'>
            <tr v-for="value in stuList">
                <!-- <td>{{value.id}}</td>
                <td>{{value.name}}</td>
                <td>{{value.age}}</td>
                <td>{{value.address}}</td>
                <td>{{value.gender}}</td> -->
                <td v-for="ate in value">{{ate}}</td>
            </tr>
        </tbody>
    </table>
</body>
<script>
    // 创建vue对象
    var ms = new Vue({
        // 添加常用配置  1.指定模板
        el: "#app",
        // 2.指定数据 数据都可以在data中添加
        data: {
            // 给一个数组
            stuList: [
                {
                    id: 1,
                    name: 'jack',
                    age: 20,
                    address: '广州黑马程序员',
                    gender: '男'
                },
                {
                    id: 2,
                    name: 'jack',
                    age: 20,
                    address: '广州黑马程序员',
                    gender: '男'
                },
                {
                    id: 3,
                    name: 'jack',
                    age: 20,
                    address: '广州黑马程序员',
                    gender: '男'
                },
                {
                    id: 4,
                    name: 'jack',
                    age: 20,
                    address: '广州黑马程序员',
                    gender: '男'
                },
                {
                    id: 5,
                    name: 'jack',
                    age: 20,
                    address: '广州黑马程序员',
                    gender: '男'
                },
                {
                    id: 6,
                    name: 'jack',
                    age: 20,
                    address: '广州黑马程序员',
                    gender: '男'
                },
            ]
        }
    })
</script>

</html>